<template>
  <div class="main-content">
    <div class="main-top-content" ref="mainTopContent">
      <searchComponent :search-content="searchFields" :search-data="searchData" @success="setNowField">
        <template v-slot:default="scope">
          <div  class="search-content">
            <div class="search-item" v-if="nowSearchField.indexOf('userAccount') > -1">
              <el-input
                  size="small"
                  v-model="queryParams.userAccount"
                  class="input-width clear-input"
                  suffix-icon="el-icon-search"
                  clearable
                  placeholder="请输入查询内容"
              ></el-input>
            </div>
          </div>

          <div class="search-button">
            <el-button type="primary" size="small"  @click="querySysUserList">搜索</el-button>
          </div>
        </template>
      </searchComponent>
    </div>

    <div class="main-operate-content" ref="mainOperateContent">
      <div style="margin-right:20px">
        <table-operate-component :fields="fields" :field-data="showFieldData" @success="setShowField">
          <template v-slot:operate>
            <div style="float: right;">
              <el-button type="primary" size="small"  @click="addUser">添加</el-button>
            </div>
          </template>
        </table-operate-component>
      </div>
    </div>
    <div class="main-contain-content" ref="tableContainer">
      <el-table
          ref="table"
          :height="tableHeight"
          :data="tableData"
          size="small"
          :header-cell-style="{background:'#E8F0F3',border: '1px solid #d9d9d9'}"
          border
          :row-style="{height:'0'}"
          v-loading="loading">
        <el-table-column
            v-for="(item,index) in fields"
            v-if="item.show"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :min-width="item.width"
            :fixed="item.fixed">

          <template v-if="item.prop === 'notificationType'" scope="scope">
            <div>{{scope.row.notificationType === 'PUBLIC' ? '公告消息' : scope.row.notificationType === 'SYSTEM'? '系统消息' : '用户消息' }}</div>
          </template>
          <template v-else-if="item.prop === 'operation'" scope="scope">
            <el-button v-if="scope.row.linkUri !== null && scope.row.linkUri !== ''" @click="messageDetail(scope.row)" type="text" size="small">详情</el-button>
            <el-button  @click="removeMessage(scope.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="10"
          layout="sizes,total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <!-- 编辑用户 -->
    <editUser ref="editUser" @success="querySysUserList('init')"/>
    <!-- 添加用户 -->
    <addUser ref="addUser" @success="querySysUserList('init')"/>
  </div>
</template>

<script>
import searchComponent from '@v/common/SearchComponents.vue'
import tableOperateComponent from '@v/common/TableOperateComponent.vue'
import editUser from "@v/user/components/EditUser.vue";
import addUser from "@v/user/components/AddUser.vue";
import {getUserList, resetPassword} from "@/api/user";


export default {
  components:{
    addUser, editUser,
    searchComponent,
    tableOperateComponent
  },
  data() {
    return {
      //筛选条件个人数据配置
      searchData:{
        dataType:'searchField',
        dataCode:'user'
      },
      nowSearchField:[],
      searchFields:[
        {
          field:"userAccount",
          label:"用户账号",
          fieldCheck:true,
        }
      ],

      //显示字段个人数据配置
      nowShowField:[],
      showFieldData:{
        dataType:'showField',
        dataCode:'user'
      },
      total: 0,
      loading: false,
      nowPage:1,
      tableHeight:400,
      queryParams:{
        pageNum:1,
        pageSize:10,
        userAccount:""
      },
      fields:[
        {
          label:"员工编号",
          prop:"userId",
          width:40,
          show:true
        },{
          label:"账号",
          prop:"userAccount",
          width:40,
          show:true
        },{
          label:"用户名",
          prop:"username",
          width:50,
          show:true
        },{
          label:"昵称",
          prop:"nickName",
          width:50,
          show:true
        },{
          label:"岗位",
          prop:"position",
          width:50,
          show:true
        },{
          label:"部门",
          prop:"deptNo",
          width:50,
          show:true
        },{
          label:"状态",
          prop:"status",
          width:50,
          show:true
        },{
          label:"操作",
          prop:"operation",
          width:50,
          fixed:'right',
          show:true
        }
      ],
      tableData: [],
    }
  },
  created() {
    this.querySysUserList();
  },
  mounted() {
    this.updateTableHeight();
    window.addEventListener('resize', this.updateTableHeight);
    this.divUpdateTableHeight();
  },
  methods: {
    setShowField(fields){
      this.fields = fields;
      this.$nextTick(() => {
        this.$refs.table.doLayout(); // 解决表格错位
      });
    },
    setNowField(field){
      this.nowSearchField = field;
    },
    divUpdateTableHeight() {
      const el = this.$refs.mainTopContent;
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          this.updateTableHeight();
        }
      });
      resizeObserver.observe(el);
    },
    updateTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = this.calculateTableHeight(); // 确保表格已经渲染完成后再计算高度
      });
    },
    calculateTableHeight() {
      // 实现高度计算逻辑，例如使用父容器的高度减去某些边距等
      let operate = this.$refs.mainOperateContent.clientHeight;
      let top = this.$refs.mainTopContent.clientHeight;
      let all = window.innerHeight;
      return all - 120 - operate - top - 60;
    },
    handleClick(row) {
      console.log(row);
    },
    async querySysUserList(){
      this.loading = true;
      let ret = await getUserList(this.queryParams);
      let content = ret.data;
      this.total = content.total;
      this.tableData = content.list;
      this.loading = false;
    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
      this.querySysUserList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.querySysUserList();
    },
    //添加用户
    addUser(){
      this.$refs["addUser"].showDialog();
    },
    //编辑用户
    editUser(user){
      this.$refs["editUser"].showDialog(user);
    },
    //重置密码
    resetPassword(user){
      this.$confirm('您是否要为该用户重置密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await resetPassword({account:user.userAccount});
        this.querySysUserList();
      }).catch(() => {
      });
    }
  },

}

</script>


<style src="../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>

</style>
